<template>
  <div class="search-list">
      <div v-title data-title="搜索结果"></div>
    <search-box v-if="showSearch"></search-box>
<div class="search-container" @click="goSearch">
        <div class="m-topSearchIpt ipt" >
            <i class="icon iconfont icon-left"></i>
            <span>{{searchWord}}</span>
        </div>
        
      </div> 
          <ul class="selectType">
          <li :class="{'act':ind === index}" @click="selectType(index)" v-for="(name, index) in type">{{name.name}}<span v-if="name.showTri"><i class="asc"></i><i class="desc"></i></span></li>
          <li @click="switchs = !switchs"><i class="icon iconfont" :class="switchs ? 'icon-viewgallery' : 'icon-viewlist'"></i></li>
          <li :class="{'act': selectShow}" @click="showSelect">筛选</li>
          </ul>
          <!-- <div class="filter">
          <transition name="fade">
              <div class="select-model" v-if="selectShow" @click="showSelect()"></div>
          </transition>
          <transition name="drop">
              <div class="select-item" v-if="selectShow">
                  <div class="select-price">价格区间（元）<input type="number"/>-<input type="number"/></div>
                  <div class="select-title">商品分类：</div>
                  <div class="select-category">
                      <li class="act">生鲜</li><li>奶粉纸尿裤</li><li>生鲜</li><li>生鲜</li><li>生鲜</li>
                  </div>
                  <div class="select-bottom">
                      <span>重置</span>
                      <span class="ok">确定</span>
                  </div>
              </div>
          </transition>
          </div> -->
<!-- <div id="youxuan"  :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
    <div class="mod-bd">
        <div class="jPage" data-page="1">
            <div class="" data-page="1">
                <div class="mod-item jProductItem" v-for="(item, key) in list">
                    <a href="#"><img :src="item.productImage" class="jImg gd-img"/>
                        <div class="gd-info">
                            <div class="gd-name">
                                <div class="title">{{item.name}}</div>
                            </div>
                            <div class="gd-price">
                                <div class="gd-price-now">
                                    <em>¥</em>{{item.pn}}</div>
                                <div class="gd-price-ori">
                                    <em>￥{{item.price}}</em>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="gd-cmd jAdd2Cart">
                        <i class="icon iconfont icon-cart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->
<div class="no-result" v-if="list.length === 0">
    <i class="icon iconfont icon-smile"></i>
    抱歉，没有找到符合条件的商品
</div>
<mt-loadmore  :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded"  ref="loadmore">
     <div class="mod-bd">
        <div class="jPage" data-page="1">
            <div class="" data-page="1">
                <div class="mod-item jProductItem" :class="{'switch-item': switchs }" v-for="(item, key) in list">
                    <router-link :to="{name: 'item', query: {productId: item.productId}}"><img :src="item.productImage" class="jImg gd-img"/>
                        <div class="gd-info">
                            <div class="gd-name">
                                <div class="title">{{item.name}}</div>
                            </div>
                            <div class="goods-label">包邮</div>
                            <div class="goods-label">破损包退</div>
                            <div class="gd-price">
                                <div class="gd-price-ori">
                                    品牌建议价：<em>￥855.00</em>
                                </div>
                                <div class="gd-price-now">
                                    <em>¥</em> {{item.pn}}
                                    <span>月销量：{{item.xl}}件</span>
                                    </div>
                                
                            </div>
                            <div class="region">
                                地区：法国
                            </div>
                        </div>
                    </router-link>
                    <div class="gd-cmd jAdd2Cart">
                        <i class="icon iconfont icon-favorites"></i>
                        <i class="icon iconfont icon-cart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>
  </mt-loadmore>

  </div>
</template>
<script>
import qs from 'qs';
import searchBox from '@/components/search.vue'
import { Toast } from 'mint-ui'
export default {
  components: {
    'search-box': searchBox
  },
  data () {
    return {
      switchs: false,
      selectShow: false,
      showTri: false,
      ind: null,
      bottomStatus: '',
      showSearch: false,
      allLoaded: false,
      searchWord: '',
      page: '1',
      sortType: '',
      size: '10',
      categoryId: '',
      type: [{
        name: '默认',
        showTri: false
      }, {
        name: '销量',
        showTri: false
      }, {
        name: '价格',
        showTri: true
      }],
      list: []
    }
  },
  created () {
    this.searchWord = this.$route.query.searchWord
    this.categoryId = this.$route.query.categoryId
  },
  methods: {
    handleBottomChange (status) {
      this.bottomStatus = status;
    },
    showSelect () {
      this.selectShow = !this.selectShow
    },
    selectType (index) {
      this.ind = index;
    },
    goSearch () {
      this.$router.push('/search')
    },
    loadBottom () {
      var self = this
      this.loading = true
      this.$http.post('http://127.0.0.1:8998/api/getGoodsData', qs.stringify({
        categoryId: this.categoryId,
        keyword: this.searchWord,
        sortType: this.sortType,
        page: this.page,
        size: this.size,
        code: this.code
      })
      )
        .then(function (response) {
          if (response.data.ret_msg === '查询成功') {
            self.page++;
            if (response.data.data.length > 0) {
              self.list = self.list.concat(response.data.data);
              console.log(response);
            } else {
              this.allLoaded = true
            }
            this.$refs.loadmore.onBottomLoaded();
          }
        })
       .catch(function (error) {
         console.log(error);
         Toast('网络请求未响应')
       });
    }
  }
}
</script>
<style lang="scss" scoped>
.filter{
    margin: auto;
    width: 100%;
    position: absolute;
    top: 3.6rem;
    bottom: 0;
    z-index: 9999;
}
.select-model {
  top: 3.6rem;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 922;
  background-color: rgba(0, 0, 0, 0.8);
}


.select-item {
  width: 80%;
  height: 100%;
  right: 0;
  position: absolute;
  z-index: 933;
  background-color: #fff;
  &.drop-enter-active, &.drop-leave-active{
    transition: transform .4s;
    opacity: 1;
}
  &.drop-enter, &.drop-leave-active{
    transform: translate3d( 100%, 0, 0);
    opacity: 1;
    }
}
.select-price{ height: 2rem; border-bottom: 1px solid #eee; padding: .5rem;
input{ width: 3.5rem; background: #eee; height: 1.2rem; line-height: 1.2rem; padding: 0 .3rem; border-radius: .3rem;}
}
.select-title{ line-height: 2rem; padding: 0 .5rem;}
.select-category{
     padding: 0 .5rem;
    li{ width: 30%; margin: .5rem 1.5%; display: block; border-radius: .2rem; background: #eee; 
    text-align: center; float: left;
    height: 1.3rem; line-height: 1.3rem; font-size: .5rem;
    &.act{ background: #E63E2E; color: #fff;}
    }
}
.select-bottom{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    display: flex;
    border-top: 1px solid #eee;
    span{
        text-align: center;
        flex: 1;
        &.ok{
            background: #E63E2E;
            color: #fff;
        }
    }
}
.mint-loadmore{margin-top: 3.4rem;}
.search-list{background: #fff;}
.search-container{
    position: fixed;top: 0;
    background: #f2f2f2;
    width: 100%;
    z-index: 99;
}

.selectType {
    display: flex;
    font-size: .6rem;
    height: 1.6rem;
    position: fixed;
    top: 1.877rem;
    width: 100%;
    z-index: 99;
    background: #fff;
    border-bottom: 1px solid #eee;
    li {
        flex: 1;
        text-align: center;
        border-right: 1px solid #eee;
        height: 1rem;
        margin: .3rem 0;
        position: relative;
        span {
            position: absolute;
            top: -0.05rem;
            right: 0.6rem;
            i {
                display: block;
                width: 0;
                height: 0;
                border: 0.25rem solid transparent;
                &.asc {
                    border-bottom-color: #E5E5E5;
                    &.active {
                        border-bottom-color: #E63E2E;
                    }
                }
                &.desc {
                    border-top-color: #E5E5E5;
                    margin-top: 0.07rem;
                    &.active {
                        border-top-color: #E63E2E;
                    }
                }
            }
        }
        &.act {
            color: #E63E2E;
        }
    }
}



</style>

